<!--
*******************************************************************************
 * Copyright © 2020-2021 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>User Creater</title>
    <link rel="icon" href="data:;base64,=">
    <link href="/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/edgexfoundry.css" rel="stylesheet">
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        .createuser-main {
            margin-top: 20%;
            width: 600px;
            height: 600px;
        }
    </style>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="createuser-main center-block">
                <div class="jumbotron">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="EdgeX-Username" class="col-sm-4 control-label">Username</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="EdgeX-Username" placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="EdgeX-Password" class="col-sm-4 control-label">Password</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" id="EdgeX-Password" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="EdgeX-ConfirmPassword" class="col-sm-4 control-label">Confirm Password</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input type="password" class="form-control" id="EdgeX-ConfirmPassword" placeholder="Confirm Password">
                                    <div class="input-group-addon"><i id="EdgeX-ConfirmPassword-Validate" class="fa fa-close" style="color:red;display:none;" aria-hidden="true"></i></div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button type="button" class="btn btn-success" onclick="addUser()"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;&nbsp;Create User</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>

</body>
<script src="/vendors/jquery/jquery.min.js"></script>
<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendors/bootbox/bootbox.min.js"></script>
<script src="/js/edgexfoundry.js"></script>
<script>
    function validateUser() {
        if ($("#EdgeX-Username").val().trim() == "") {
            $("#EdgeX-Username").focus();
            return false
        }
        if ($("#EdgeX-Password").val().trim() == "") {
            $("#EdgeX-Password").focus();
            return
        }
        if ($("#EdgeX-ConfirmPassword").val().trim() == "") {
            $("#EdgeX-ConfirmPassword").focus();
            return false
        }
        if ($("#EdgeX-ConfirmPassword").val().trim() != $("#EdgeX-Password").val().trim()) {
            $("#EdgeX-ConfirmPassword").focus();
            $("#EdgeX-ConfirmPassword-Validate").show();
            return false
        }
        $("#EdgeX-ConfirmPassword-Validate").hide();
        return true
    }

    function addUser() {

        if (!validateUser()) {
            return
        }
        $(".createuser-main button").attr("disabled", true);
        var user = {
            username: $("#EdgeX-Username").val().trim(),
            password: $("#EdgeX-Password").val().trim()
        }
        $.ajax({
            url: "/api/v1/user",
            method: "POST",
            data: JSON.stringify(user),
            success: function(data) {
                window.location.href = '/login.html?ran=' + Math.random();
            },
            error: function(result) {
                $(".createuser-main button").attr("disabled", false);
                bootbox.alert({
                    title: 'Error',
                    message: result.responseText,
                    className: 'red-green-buttons'
                });
            }
        });
    }

    $(document).ready(function() {
        document.addEventListener('keyup', (event) => {
            if (event.key == 'Enter') {
                addUser();
            }
        }, false);
    });
</script>

</html>